<template>
	<div>
		<el-table highlight-current-row :data="data" row-key="id" border default-expand-all show-summary sum-text="应用总资金">
			<el-table-column type="index" label="序号" width="70" />
			<el-table-column prop="name" label="费用名称" />
			<el-table-column prop="amount" label="费用金额（万元）">
				<template #default="scope">
					<el-input v-model="input1" placeholder="111"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="remark" label="备注">
				<template #default="scope">
					<el-input v-model="input2" placeholder="111"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<!-- <el-input placeholder="111"></el-input> -->
					<el-button link size="small" type="primary"> 新增同级费用 </el-button>
					<el-button link size="small" type="primary"> 新增下级费用 </el-button>
					<el-button link size="small" type="primary"> 删除 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-button @click="confirm">确认</el-button>
	</div>
</template>
  <script setup lang="ts">
import { ref, reactive } from 'vue';
import type { FormInstance } from 'element-plus';
//申报时提交的数据汇总
const dataList = ref({});
const confirm = () => {
	dataList.value = {
		budget: {
			budget: [
				{
					data: {}, //表格里的数据
					children: [],
				},
			],
			total: 0,
		},
	};
	// console.log(dataList.value);
};
const data = ref([
	{
		id: 1,
		name: '项目建设费用',
		role: 1,
		remark: 4,
	},
	{
		id: 2,
		name: '项目建设其他费用',
		role: 5,
		remark: 83,
		children: [
			{
				id: 31,
				name: '初步设计费',
				role: 37,
				remark: 6,
			},
		],
	},
]);
const input1 = ref(0);
const input2 = ref(0);
const formRules = reactive({
	name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
	role: [{ required: true, message: '请输入角色', trigger: 'change' }],
});
const forms = ref<FormInstance>();
const submitForm = async () => {
	if (!forms) return;
	return await forms.value?.validate((valid: any) => {
		if (valid) {
			console.log('submit!');
		} else {
			console.log('error submit!');
			return false;
		}
	});
};
defineExpose({ dataList, confirm });
</script>